<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
		<style>
			.box {
				width: 200px;
				height: 100px;
				background-color: #f00;
				margin: 100px;
				/* transition:transform 3s linear;*/
				animation: bgc 3s infinite 2s;
				opacity: 0.3;
				/* 透明度 */
			}

			.box:hover {
				/* transform: translate(200px,100px);
				transform: rotate(45deg);
				transform: scale(1,2);
				transform: skew(45deg,20deg); */
			}

			@keyframes bgc {

				/* from {
					background-color: #0f0;
				}

				to {
					background-color: #00f;
				} */
				0% {
					background-color: #0f0;
				}

				30% {
					background-color: #00f;
				}

				100% {
					background-color: #000;
				}
			}
		</style>
	</head>
	<body>
		<p>这是一首诗：<span style="color: red;">《山行》</span></p>
		<p>这是一首诗：《鹿柴》</p>
		<span class="fa fa-anchor"></span>
		<span class="fa fa-heart fa-3x"></span>
		<span class="fa fa-wechat"></span>
		<div class="box"></div>
	</body>
</html>
